
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}默认标题{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .modal-transition {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .modal-hidden {
            opacity: 0;
            transform: translateY(-20px);
            pointer-events: none;
        }
    </style>
</head>
<body class="bg-gray-50">
    {% block content %}{% endblock %}

    <!-- 全局模态框容器 -->
    <div id="modalContainer" class="modal-transition modal-hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl relative">
            <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
                <i class="fas fa-times"></i>
            </button>
            <div id="modalContent" class="p-6"></div>
        </div>
    </div>

    <script>
        // 全局模态框控制函数
        function openModal(url) {
            fetch(url)
                .then(response => {
                    if (!response.ok) throw new Error('Network response was not ok');
                    return response.text();
                })
                .then(html => {
                    document.getElementById('modalContent').innerHTML = html;
                    document.getElementById('modalContainer').classList.remove('modal-hidden');
                })
                .catch(error => {
                    console.error('Error loading modal content:', error);
                    document.getElementById('modalContent').innerHTML = `
                        <div class="text-red-500 p-4">
                            <i class="fas fa-exclamation-triangle mr-2"></i>
                            加载内容失败，请稍后重试
                        </div>
                    `;
                    document.getElementById('modalContainer').classList.remove('modal-hidden');
                });
        }
        
        function closeModal() {
            document.getElementById('modalContainer').classList.add('modal-hidden');
        }

        // 全局表单提交处理
        document.addEventListener('submit', function(e) {
            if (e.target.classList.contains('ajax-form')) {
                e.preventDefault();
                const form = e.target;
                fetch(form.action, {
                    method: form.method,
                    body: new FormData(form),
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        if (data.redirect) {
                            window.location.href = data.redirect;
                        } else {
                            closeModal();
                            if (data.message) {
                                alert(data.message);
                            }
                        }
                    } else {
                        document.getElementById('modalContent').innerHTML = data.form_html;
                    }
                });
            }
        });
    </script>
</body>
</html>
